<template>
    <div class='h-100' ref='page'>
        <div class='top-header' ref='header'>
            <top-header :showData='false'></top-header>
            <section id='yunying-time'>
                <div>
                    <title-body>
                        <span slot='title' class='title'><transparent>占</transparent>运营时间</span>
                        <div v-size.marginLeft='20'>
                            <datetime-count v-model='yunyingTime' d h m></datetime-count>
                        </div>
                    </title-body>
                </div>
            </section>
        </div>

        <section ref='container' style='position:fixed;width:100%;height:100%;left:0;top:0'>
            <div class='h-100 relative'>
                <div id='map-container'>
                    <map-chart @mouseover='mouseoverMap' v-if='completePaddintTop' v-model='mapData'></map-chart>
                </div>

                <aside class='left-part'>
                    <glass-box link='/device'>
                        <div slot='title' class='color-f5f5f5'>设备数：<countTo :endVal='deviceTotalCount'></countTo></div>
                        <div v-size.marginTop='30' id='device-count-pie-chart'>
                            <device-pie-chart v-model='deviceCategoryData'></device-pie-chart>
                        </div>

                        <div>
                            <div v-size.paddingLeft='20'>
                                <arrow-title><span slot='title'>设备在线率</span></arrow-title>
                            </div>

                            <div v-size.marginTop='15'>
                                <div id='device-online-rate-chart'>
                                    <device-online-rate-chart v-model='deviceOnlineRateData'></device-online-rate-chart>
                                </div>
                            </div>
                        </div>

                        <div v-size.marginTop='15'>
                            <div v-size.paddingLeft='20'>
                                <arrow-title><span slot='title'>近7日设备使用次数</span></arrow-title>
                            </div>
                            <div v-size.marginTop='15' id='device-availability-chart'>
                                <device-use-chart v-model='deviceLatelyUseData'></device-use-chart>
                            </div>
                        </div>

                    </glass-box>
                </aside>

                <aside class='right-part'>
                    <div id='order-chart'>
                        <glass-box link='/order'>
                            <div slot='title' class='color-f5f5f5'>今日订单：<countTo :endVal='todayOrderCount'></countTo></div>
                            <div v-size.marginTop='40' id='order-bar-chart'>
                                <order-chart v-model='latelyOrderData'></order-chart>
                            </div>
                        </glass-box>
                    </div>

                    <div id='abnormal-chart'>
                        <glass-box>
                            <div slot='title' class='color-f5f5f5'>充电异常</div>
                            <div v-if='exceptionDataList' class='m-t-30' id='abnormal-block'>
                                <abnormal-block v-for='(item, index) in exceptionDataList' :key='item.exceptionType' :class='{"m-t-30" : index > 0}' :rate='item.rate' v-model='item.data'>
                                    <template v-if='item.type == 1'>超功率<br>占比</template>
                                    <template v-else-if='item.type == 2'>系统故障<br>占比</template>
                                    <template v-else>其他占比</template>
                                </abnormal-block>
                            </div>
                            <loading v-else></loading>
                        </glass-box>
                    </div>
                </aside>
            </div>
        </section>
        
        <div class='store-modal' v-if='showStoreModal' ref='storeModal' :style='{left : storeModalLeft + "px", top : storeModalTop + "px"}'>
            <store-modal isAgent v-model='currentStoreId'></store-modal>
        </div>

        <div class='store-modal' v-if='showSiteModal' ref='storeModal' :style='{left : storeModalLeft + "px", top : storeModalTop + "px"}'>
            <site-modal isAgent v-model='currentSiteId'></site-modal>
        </div>
        

    </div>
</template>

<script src='./index.js'></script>

<style scoped lang='scss' src='./index.scss'></style>